import React ,{useState}from 'react';
import { Space, Table, Tag, Tabs } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import "./GoodPJ.scss"
import type { TabsProps } from 'antd';
import { Button, Modal, Form, Input, DatePicker, Rate, Select ,Drawer} from 'antd';
import { Selector,TextArea,Toast} from 'antd-mobile'
interface Props {

}
interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
}

function GoodPJ(props: Props) {
    const [form] = Form.useForm();
    const { Option } = Select;
    const columns: ColumnsType<DataType> = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: 'Address',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: 'Tags',
            key: 'tags',
            dataIndex: 'tags',
            render: (_, { tags }) => (
                <>
                    {tags.map((tag) => {
                        let color = tag.length > 5 ? 'geekblue' : 'green';
                        if (tag === 'loser') {
                            color = 'volcano';
                        }
                        return (
                            <Tag color={color} key={tag}>
                                {tag.toUpperCase()}
                            </Tag>
                        );
                    })}
                </>
            ),
        },
        {
            title: 'Action',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a>Invite {record.name}</a>
                    <a>Delete</a>
                </Space>
            ),
        },
    ];

    const data: DataType[] = [
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
            tags: ['nice', 'developer'],
        },
        {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
            tags: ['loser'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },


    ];

    //tabs切换栏
    const onChange = (key: string) => {
        console.log(key);
    };

    const items: TabsProps['items'] = [
        {
            key: '1',
            label: `办事评价`,
            children: <div className='tabs1'>
                <div className='tabs1_top'>
                    <div>
                        全部
                    </div>
                    <div>
                        非常满意
                    </div>
                    <div>
                        满意
                    </div>
                    <div>
                        基本满意
                    </div>
                    <div>
                        不满意
                    </div>
                    <div>
                        非常不满意
                    </div>
                </div>
                <div className='tabs1_tottom'>
                    <div className='tabs1_tottom1'>
                        我是李某
                    </div>
                </div>
            </div>,
        },
        {
            key: '2',
            label: `办事指南评价`,
            children: <div className='tabs2'>
                <div className='tabs2_top'>
                    <div>
                        全部
                    </div>
                    <div>
                        非常满意
                    </div>
                    <div>
                        满意
                    </div>
                    <div>
                        基本满意
                    </div>
                    <div>
                        不满意
                    </div>
                    <div>
                        非常不满意
                    </div>
                </div>
                <div className='tabs2_tottom'>
                    <div className='tabs2_tottom1'>
                        我是李某
                    </div>
                </div>
            </div>,
        },

    ];
    //去我的办件
    const banjian = () => {
        console.log("办件")
    }
    //去我的办事
    const banshi = () => {
        console.log("办事")
    }

    //弹出框的内容
    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = async (id:any) => {
      setIsModalOpen(true);
      
    };
    var [xuanxiang, setxuanxiang]:any = useState([]);
    const handleOk = async () => {
      setIsModalOpen(false);
    };
  
  
    const handleCancel = () => {
      setIsModalOpen(false);
    };
     var [manyi,setmanyi]:any=useState()
    //星级
    const xingzhi=(val:any)=>{
        console.log(val)
        if(val=="1"){
            setmanyi("非常不满意")
        }else if(val=="2"){
            setmanyi("不满意")
        }else if(val=="3"){
            setmanyi("基本满意")
        }else if(val=="4"){
            setmanyi("满意")
        }else if(val=="5"){
            setmanyi("非常满意")
        }
    }
     //评价内容
     const pingjiatext=(val:any)=>{
        console.log(val)
     }

     //评价下拉内容
     const onFinish = async (values: any) => {
        console.log('Success:', values);
        //在这里拿到数据去发添加数据的请求
    };
    const onGenderChange = (value: string) => {
        switch (value) {
            case 'male':
                form.setFieldsValue({ note: 'Hi, man!' });
                break;
            case 'female':
                form.setFieldsValue({ note: 'Hi, lady!' });
                break;
            case 'other':
                form.setFieldsValue({ note: 'Hi there!' });
                break;
            default:
        }
    };
    
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };



    //父组件调用子组件方法
    return (
        <div className='GoodPJ'>
            <Modal title="大厅或评价窗口" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
            <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >   <Form.Item name="type" label="部门" rules={[{ required: true }]}>
            <Select
                placeholder="请选择"
                onChange={onGenderChange}
                allowClear
            >
                <Option value="办件">办件</Option>
                <Option value="办件">账户</Option>
            </Select>
        </Form.Item>
        </Form>


                <Rate onChange={val => xingzhi(val)} />
                <p>{manyi}</p>
                <div className='text'>
                    <TextArea onChange={val => pingjiatext(val)} defaultValue={"写其他建议和意见"} showCount />
                </div>
            </Modal>
            <div className='header'>
                <div className='header_bx'>
                    <h2>好差评</h2>
                    <p>建立政务服务“好差评”制度，服务绩效由企业和群众评判，通过公开公示的好差评平台，促进政府部门做好服务工作</p>
                    <div className='header_bx_bottom'>
                        <div onClick={banjian}>评价我的办件</div>
                        <div onClick={banshi}>评价办事指南</div>
                        <div onClick={showModal}>评价大厅或窗口</div>
                    </div>
                </div>
            </div>
            <div className='nav'>
            
                <div className='nav_bottom'>
                    <div>办件</div>
                    <div>差评</div>
                    <div>整改</div>
                    <div>平均</div>
                </div>
            </div>
            <div className='bumen'>
                <div className='bumen_top'>
                    部门情况
                </div>
                <div className='bumen_bottom'>
                    <div className='bumen_bottom_left'>
                        <Table columns={columns} dataSource={data} />
                    </div>
                    <div className='bumen_bottom_right'>
                        <Table columns={columns} dataSource={data} />
                    </div>
                </div>
            </div>
            <div className='PJxinxi'>
                <div className='PJxinxi_top'>
                    评价信息
                </div>
                <div className='PJxinxi_bottom'>
                    <div className='PJxinxi_bottom_left'>我是左边的eachers</div>
                    <div className='PJxinxi_bottom_right'>我是右边的</div>
                </div>
            </div>
            <div className='tabs'>
                <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
            </div>
        </div>
    );
}

export default GoodPJ;